<template>
  <div class="mod-configs">
    <el-table
      :data="dataList"
      @sort-change='sort_change'
      :max-height="tableHeight"
      :header-cell-style="{background:'#F5F7FA'}"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        prop="name"
        min-width="80"
        align="center"
        sortable='custom'
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="profession"
        min-width="170"
        sortable='custom'
        align="center"
        label="证书专业">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        sortable='custom'
        min-width="150"
        align="center"
        label="证书编号">
      </el-table-column>
      <!--  挂靠的 -->
      <el-table-column
        prop="borrowTime"
        sortable='custom'
        min-width="120"
        v-if="this.days"
        align="center"
        :formatter="dateFormats"
        label="开始日期">
      </el-table-column>
      <el-table-column
        prop="borrowEndTime"
        sortable='custom'
        v-if="this.days"
        align="center"
        :formatter="dateFormats"
        min-width="150"
        label="结束日期">
      </el-table-column>
      <el-table-column
        prop="totalPay"
        align="center"
        sortable='custom'
        :formatter="stateFormat"
        v-if="this.days"
        min-width="150">
        <template slot-scope="scope" slot="header">
        <span>总费用
        <el-tooltip :aa="scope" class="item" effect="dark" content="总费用包含挂入支出,中介费,其他费用等等" placement="top-start">
        <i class= 'el-icon-warning' style="color:#409eff; margin-left:2px;'"> </i>
      </el-tooltip>
        </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="examPay"
        sortable='custom'
        align="center"
        v-if="!this.days"
        :formatter="stateFormat"
        min-width="100"
        label="考试费用"
        >
      </el-table-column>
      <el-table-column
        prop="transactionTimes"
        align="center"
        sortable='custom'
        v-if="this.days"
        min-width="110"
        label="借出次数"
        >
      </el-table-column>
      <el-table-column
        prop="transactionDays"
        sortable='custom'
        align="center"
        v-if="this.days"
        min-width="100"
        label="总天数"
        >
      </el-table-column>
      <el-table-column
        prop="renewalPay"
        sortable='custom'
        align="center"
        v-if="!this.days"
        :formatter="stateFormat"
        min-width="120"
        label="延期费用"
        >
      </el-table-column>
      <el-table-column
        prop="affiliationIncome"
        sortable='custom'
        align="center"
        min-width="110"
        :formatter="stateFormat"
        label="挂出收入"
        >
      </el-table-column>
      <el-table-column
        prop="borrowOutTimes"
        align="center"
        sortable='custom'
        min-width="110"
        label="挂出次数"
        >
      </el-table-column>
      <el-table-column
        prop="borrowOutDays"
        sortable='custom'
        min-width="100"
        align="center"
        label="总天数"
        >
      </el-table-column>
      <el-table-column
        prop="transactionTimes"
        v-if="!this.days"
        sortable='custom'
        align="center"
        min-width="120"
        label="借出次数"
        >
      </el-table-column>
     <el-table-column
        prop="transactionDays"
        v-if="!this.days"
        sortable='custom'
        align="center"
        min-width="100"
        label="总天数"
       >
      </el-table-column>
      <el-table-column
        prop="vacancyRate"
        align="center"
        sortable='custom'
        min-width="120"
      >
        <template slot-scope="scope" slot="header">
        <span>空置率
        <el-tooltip :aa="scope" class="item" effect="dark" content="空闲时长/总时长" placement="top-start">
        <i class= 'el-icon-warning' style="color:#409eff; margin-left:2px;'"></i>
      </el-tooltip>
        </span>
        <!-- <span></span> -->
        </template>
        <template slot-scope="scope">
        <span>{{parseFloat((scope.row.vacancyRate*100).toFixed(10))}}%</span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="80"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button style="color:#6E92E9;" type="text" size="mini" @click="addOrUpdateHandle(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
     <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, sizes, jumper">
    </el-pagination>
  </div>
</template>
<script type="text/javascript">
$(function() {
($("#content1").text());
})
</script>
<script>
  import 'quill/dist/quill.snow.css'
  import merge from 'lodash/merge'
  import AddOrUpdate from './certifirenewal-info'
  import CertificateDetail from '../certinfo/certificate-list-detail'
  export default {
    props: {
    days:{
      type: Number
    },
    certificateType: {
      type:Number
    },
    value1:{
      type:Array
    },
    name:{
      type:String
    }
    },
    data () {
      return {
        dataForm: {
          key: ''
        },
        dataRow:{},
        centerDialogVisible:false,
        cancellationDialogVisible:false,
        dataList: [],
        articleData:{
          title:'',
          content:''
        },
        tableHeight:0,
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        heightis: 306,
        // validityType:'',
        dialogPostPones:false,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        // type: '',
        tenantId: '',
        orderBy:'',
        inOrder:'',
        cancellationid:[],
      }
    },
    components: {
      AddOrUpdate
    },
    mounted() {
    this.stateFormat()
    },
    
    watch: {
    },
    created(){
      this.adjustTableHeight()
    },
    methods: {
    adjustTableHeight(){
      this.$nextTick(() => {
            this.tableHeight = window.innerHeight - this.heightis;
            //后面的50：根据需求空出的高度，自行调整
        })
      },
      sort_change(column){
      this.orderBy = column.prop
      if(column.order =='ascending'){
        this.inOrder = 'asc'
      }
      if(column.order =='descending'){
        this.inOrder = 'desc'
      }
      this.getDataList()
      },
      // dateFormat (row, column, cellValue, index) {
      //   return cellValue ? cellValue.substring(0, 10) : ''
      // },
    stateFormat(row, column, cellValue){
			cellValue += '';
			if (!cellValue.includes('.')) cellValue += '.';
			return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
				return $1 + ',';
			}).replace(/\.$/, '');
		},
    dateFormats(row, column, cellValue, index){
      if (!Boolean(cellValue)) {
                return "-";
            } else {
                return cellValue;
            }
      },
      getDataList () {
        if(!this.days){
        this.dataListLoading = true
        this.dataList = []
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/listBalance/'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'certificateType':this.certificateType,
            'orderBy': this.orderBy,
            'inOrder': this.inOrder,
            'name':this.name,
            'releaseTime':this.$dateFormat(this.value1[0]),
            'validityEndTime':this.$dateFormat(this.value1[1])
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          }
          this.dataListLoading = false
        })
        }else{
        this.dataListLoading = true
        this.dataList = []
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/listBalance/'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'certificateType':this.certificateType,
            'orderBy': this.orderBy,
            'inOrder': this.inOrder,
            'name':this.name,
            'borrowTime':this.$dateFormat(this.value1[0]),
            'borrowEndTime':this.$dateFormat(this.value1[1])
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            console.log(this.dataList);
            this.totalPage = data.page.totalCount
          }
          this.dataListLoading = false
        })
        }
      },
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      addOrUpdateHandle (row) {
        this.$emit('clickCertificateListVisible',row)
      },
    }
  }
</script>
<style lang="scss" scoped>
 // 分页颜色控制
 .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #409EFF !important;
    color: #fff !important;
  }
  /deep/.button-s{
  margin-left: 0px !important;
  }
  .ell-form-item {
      margin-bottom: 5px;
  }
  .demo-ruleForm{
    margin-top: 20px;
  }
  .iconPro {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .icon-can{
    font-size: 22px;
    color: #F56C6C;
    margin-right: 10px;
  }
  /deep/.el-tabs__header{
    margin-bottom: 0px !important;
  }
  .cancellationIcon{
    display: flex;
    justify-content: center;
    align-items: center;
    .zuofei{
      font-size: 14px;
      color: #303133;
    }
   .bured{
     font-size: 14px;
     color: #F56C6C;
   }
  }
</style>
